<script lang="ts" setup>
import MoNavbar from './mo-navbar.vue'
import PcNavbar from './pc-navbar.vue'

// 开启平滑滚动的时候sticky定位会失效，因为平滑滚动会移动整个外层容器，导致sticky无法固定
// 开启平滑滚动需要用gsap pin来固定导航栏，取消下面的注释使用pin固定元素
/*import { useTemplateRef, shallowRef } from 'vue'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { useGsapContext } from '@/hooks'
import { useScrollGroup } from '@/hooks/reno14-pro.ts'

const appRoot = shallowRef<HTMLElement | null>(null)
const navBarRef = useTemplateRef<HTMLElement | null>('navBarRef')

const { scrollGroup } = useScrollGroup()
useGsapContext(() => {
  if (!appRoot.value) {
    appRoot.value = document.querySelector('body') as HTMLElement | null
  }

  ScrollTrigger.create({
    trigger: navBarRef.value,
    pin: true,
    start: 'top top',
    endTrigger: appRoot.value,
    // 结束位置设置为#app元素
    end: 'bottom top',
    // 取消固定时的padding填充
    pinSpacing: false,
    invalidateOnRefresh: true,
    ...scrollGroup,
  })
})*/
</script>

<template>
  <div ref="navBarRef" class="bg-white relative">
    <mo-navbar class="lg:hidden" />
    <pc-navbar class="hidden lg:block" />
  </div>
</template>
